<template>
  <div class="scroll-root">
    <div class="scroll-title">
      <RouterLink to="page1" active-class="active">页面1</RouterLink>
      <RouterLink to="page2" active-class="active">页面2</RouterLink>
      <RouterLink to="page3" active-class="active">页面3</RouterLink>
    </div>
    <div class="scroll-content">
      <RouterView />
    </div>
  </div>
</template>
<script setup lang="ts" name="IndexPage"></script>
<style lang="css" scoped>
/*【步骤1】标题和内容，必须包含在这里面 */
.scroll-root {
  /* 弹性布局，设置这个，内容才可能占满 */
  display: flex;
  /* 垂直排列 */
  flex-direction: column;
  /* 宽度占满 */
  width: 100%;
  /* 高度占满 */
  height: 100vh;
}
/*【步骤2】固定的标题 */
.scroll-title {
  width: 100%;
  /*最好固定高度 */
  min-height: 50px;
  line-height: 50px;
  /* 固定标题 */
  position: sticky;
  /* 确保标题在内容上方 */
  z-index: 1;
  align-items: center;
  /* 【下面3个都要设置】横向可滑动 */
  overflow-x: auto;
  display: flex;
  white-space: nowrap;
}
/*【步骤3】滑动的父级 */
.scroll-content {
  /* 占满剩余控件 */
  flex: 1;
  /* 防止内容溢出父容器 */
  overflow: hidden;
  /* 设置这个之后，子项通过flex: 1;设置权重 */
  display: flex;
  /* 垂直排列 */
  flex-direction: column;
}

.scroll-title a {
  flex: 1;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: white;
  cursor: pointer;
  text-align: center;
  min-width: 100px;
  font-size: large;
  border-bottom: 3px solid lightgray;
}
.scroll-title a.active {
  color: var(--main-color);
  font-weight: bold;
  border-bottom: 3px solid var(--main-color);
}
.my-style {
  width: 100%;
  text-align: center;
  padding-top: 20%;
}
</style>
